<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/common.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="/WEB-INF/jsp/common/importHead.jsp"%>
<%@ include file="/WEB-INF/jsp/common/importCommonCss.jsp"%>
<link href="${basePath }/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen" />
<style>
	.charts-row{
		margin-bottom: 15px;
	}
	.charts{
		border: solid 1px #c0c0c0;
	}
	.charts-height {
		height: 400px;
	}
	#searchForm div.input-prepend select{
		margin: 0;
	}
	
	#searchForm div.input-prepend div.input-append{
		margin: 0;
	}
</style>
</head>
<body>
	<%@ include file="/WEB-INF/jsp/common/navi.jsp" %>
	<div style="float: left;margin-left: 25px;" id="contentDiv">
		<script>
			document.getElementById("contentDiv").style.width = document.body.offsetWidth - 250 + "px";
		</script>
		<ul class="breadcrumb" style="margin-bottom: 5px;">
	      <li><a href="${basePath }/index">首页</a></li>
	  	</ul>
	
		<form action="${basePath }/statistics/init" method="post" id="searchForm" class="navbar-form navbar-right" style="margin-bottom: 15px;">		
			<div class="row-fluid">
				<div class="input-prepend span4">
				    <span class="add-on">折线图：</span>
				    <select id="statisticsType" name="statisticsType" style="width: 130px;">
				    	<option value="yyyy-MM-dd" <c:if test="${statisticsType eq 'yyyy-MM-dd' or (statisticsType ne 'yyyy-MM' and statisticsType ne 'yyyy')}">selected="selected"</c:if>>按日统计</option>
				    	<option value="yyyy-MM" <c:if test="${statisticsType eq 'yyyy-MM'}">selected="selected"</c:if>>按月统计</option>
				    	<option value="yyyy" <c:if test="${statisticsType eq 'yyyy'}">selected="selected"</c:if>>按年统计</option>
				    </select>
				</div>
				<div class="input-prepend span4">
				    <span class="add-on" style="float: left">统计日期【开始】</span>
				    <div class="input-append date" id="startDate" data-date-format="yyyy-mm-dd">
					    <input style="width: 6em;" name="startDate" size="16" type="text" value="${startDate }" readonly />
					    <span class="add-on"><i class="icon-th"></i></span>
					    <span class="add-on"><i class="icon-remove"></i></span>
					</div>
				</div>
				<div class="input-prepend span4">
				    <span class="add-on" style="float: left">统计日期【结束】</span>
				    <div class="input-append date" id="endDate" data-date-format="yyyy-mm-dd">
					    <input style="width: 6em;" name="endDate" size="16" type="text" value="${endDate }" readonly />
					    <span class="add-on"><i class="icon-th"></i></span>
					    <span class="add-on"><i class="icon-remove"></i></span>
					</div>
				</div>
			</div>
		  	
		  	<button type="submit" class="btn btn-default">统计</button>
		  	<button type="button" class="btn btn-default" onclick="searchForm.reset();">重置</button>
		    <input name="pageNum" type="hidden" value="${page.current }" />
	 	</form>
		
		<div class="row-fluid charts-row">
			<div id="customerPie" class="span6 charts-height charts"></div>
			<div id="voltageLevelPie" class="span6 charts-height charts"></div>
		</div>
		<div class="row-fluid charts-row">
			<div id="repairTypePie" class="span6 charts-height charts"></div>
		</div>
		<div class="row-fluid charts-row">
			<div id="voltageLevelLine" class="span12 charts-height charts"></div>
		</div>
		<div class="row-fluid charts-row">
			<div id="repairTypeLine" class="span12 charts-height charts"></div>
		</div>
		<div class="row-fluid charts-row">
			<div id="customerVoltageLoss" class="span12 charts-height charts"></div>
		</div>
	</div>
	<div class="clearfix"></div>
	<%@ include file="/WEB-INF/jsp/common/importCommonJs.jsp"%>
	<script type="text/javascript" src="${basePath }/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
	<script type="text/javascript" src="${basePath }/js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
	<script type="text/javascript" src="${basePath }/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
	<script src="${basePath }/js/echarts.min.js"></script>
	
	<script>
		var customerPieData = eval('(${customerPie})');
		var repairTypePieData = eval('(${repairTypePie})');
		var voltageLevelPieData = eval('(${voltageLevelPie})');
		var repairTypeLineData = eval('(${repairTypeLine})');
		var allRepairType = eval('(${allRepairType})');
		var voltageLevelLineData = eval('(${voltageLevelLine})');
		var allVoltageLevel = eval('(${allVoltageLevel})');
		var customerVoltageLossData = eval('(${customerVoltageLoss})');
		var dateFunctions = ["getFullYear","getMonth","getDate"];
	</script>
	<script src="${basePath }/js/statistics.js"></script>
	
</body>
</html>
